<template>
  <div class="home_page">
    <sysHeader></sysHeader>
    <div class="home_center_chart">
      <div id="myChart" :style="{width: '789px', height: '874px'}"></div>
    </div>
    <div class="home_center_right_top">
      <div class="home_center_right_top_title">各类资源汇总</div>
      <div class="home_center_right_top_body">
        <sysChart :options="centerRightTopOptions" :echart_height="'230px'"></sysChart>
      </div>
    </div>
    <div class="home_center_bottom">
      <el-row>
        <el-col :span="8">
          <div class="tongji_item" @click="clickTitle(2)">
            <div class="tongji_item_name">总停车场数</div>
            <div class="tongji_item_num">
              <DigitRoll :rollDigits="tongji.ztccs" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="tongji_item" @click="clickTitle(3)">
            <div class="tongji_item_name">路内车场数</div>
            <div class="tongji_item_num">
              <DigitRoll :rollDigits="tongji.lnccs" />
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="tongji_item" @click="clickTitle(4)">
            <div class="tongji_item_name">路外车场数</div>
            <div class="tongji_item_num">
              <DigitRoll :rollDigits="tongji.lwccs" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="home_left_center" :class="moveFlag?'goleft':'backleft'">
      <div class="home_left_center_title" @click="clickTitle(1)">新能源配比</div>
      <div class="home_left_center_chart">
        <div class="home_left_center_1">
          <sysChart :options="leftCenterOptions1" :echart_height="'200px'"></sysChart>
        </div>
        <div class="home_left_center_2">
          <sysChart :options="leftCenterOptions2" :echart_height="'200px'"></sysChart>
        </div>
      </div>
    </div>
    <div class="home_left_bottom" :class="moveFlag?'goleft':'backleft'">
      <div class="home_left_bottom_title">共享单车注册量和单车数量比</div>
      <div class="home_left_bottom_chart">
        <sysChart :options="leftBottomOptions" :echart_height="'302px'"></sysChart>
      </div>
    </div>
    <div class="home_center_left">
      <div class="home_center_left_title">重大事件</div>
      <div class="home_center_left_box">
        <vue-seamless-scroll :data="tableData2" class="seamless-warp" :class-option="classOption">
          <div
            class="home_center_left_item"
            v-for="(item,index) in tableData2"
            :key="index"
          >·{{item.street_name}}</div>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="home_left_table" :class="moveFlag?'goleft':'backleft'">
      <div class="home_left_table_border"></div>
      <div class="common_table_head">
        <el-row>
          <el-col :span="8">
            <div class="common_cell">区名</div>
          </el-col>
          <el-col :span="8">
            <div class="common_cell">街道名称</div>
          </el-col>
          <el-col :span="8">
            <div class="common_cell">交通拥堵指数</div>
          </el-col>
        </el-row>
      </div>
      <div class="common_table_body" style="color:#fff;">
        <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="classOption">
          <div class="common_row" v-for="(item,index) in tableData" :key="index">
            <el-row>
              <el-col :span="8">
                <div class="common_cell">{{item.area_name}}</div>
              </el-col>
              <el-col :span="8">
                <div class="common_cell">{{item.street_name}}</div>
              </el-col>
              <el-col :span="8">
                <div class="common_cell">{{item.jam_index}}</div>
              </el-col>
            </el-row>
          </div>
        </vue-seamless-scroll>
      </div>

      <!--
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="area_name"
                        label="区名"
                        align="center"
                        :show-overflow-tooltip="true"
                        header-align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="street_name"
                        align="center"
                        :show-overflow-tooltip="true"
                        header-align="center"
                        label="道路名称">
                </el-table-column>
                <el-table-column
                        width="150"
                        align="center"
                        header-align="center"
                        prop="jam_index"
                        :show-overflow-tooltip="true"
                        label="交通拥堵指数">
                </el-table-column>
            </el-table>
      -->
    </div>
    <div class="home_right_chart">
      <div class="home_right_chart_title">车场占比</div>
      <div
        class="home_right_chart_box"
        @mouseover="chartChangeFlag=false"
        @mouseleave="chartChangeFlag=true"
      >
        <sysChart :options="rightChartOptions" :echart_height="'380px'"></sysChart>
      </div>
    </div>
    <div class="home_right_table">
      <div class="home_right_table_border"></div>
      <div class="home_right_table_title">热点区域出行热度</div>
      <div class="common_table_head">
        <el-row>
          <el-col :span="8">
            <div class="common_cell">序号</div>
          </el-col>
          <el-col :span="8">
            <div class="common_cell">出行热度区域</div>
          </el-col>
          <el-col :span="8">
            <div class="common_cell">出行热度</div>
          </el-col>
        </el-row>
      </div>
      <div class="common_table_body" style="color:#fff;">
        <vue-seamless-scroll :data="tableData1" class="seamless-warp" :class-option="classOption">
          <div class="common_row" v-for="(item,index) in tableData1" :key="index">
            <el-row>
              <el-col :span="8">
                <div class="common_cell">{{item.index}}</div>
              </el-col>
              <el-col :span="8">
                <div class="common_cell">{{item.area_name}}</div>
              </el-col>
              <el-col :span="8">
                <div class="common_cell">
                  <span v-if="item.hot_spot === '爆满'" style="color:#FF6F6F">{{item.hot_spot}}</span>
                  <span v-if="item.hot_spot === '拥挤'" style="color:#F7B500">{{item.hot_spot}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </vue-seamless-scroll>
      </div>
      <!--            <el-table-->
      <!--                    :data="tableData1"-->
      <!--                    style="width: 100%">-->
      <!--                <el-table-column-->
      <!--                        prop="index"-->
      <!--                        label="区名"-->
      <!--                        align="center"-->
      <!--                        :show-overflow-tooltip="true"-->
      <!--                        header-align="center"-->
      <!--                        width="150">-->
      <!--                </el-table-column>-->
      <!--                <el-table-column-->
      <!--                        prop="area_name"-->
      <!--                        align="center"-->
      <!--                        :show-overflow-tooltip="true"-->
      <!--                        header-align="center"-->
      <!--                        label="道路名称">-->
      <!--                </el-table-column>-->
      <!--                <el-table-column-->
      <!--                        width="150"-->
      <!--                        align="center"-->
      <!--                        header-align="center"-->
      <!--                        prop="hot_spot"-->
      <!--                        :show-overflow-tooltip="true"-->
      <!--                        label="交通拥堵指数">-->
      <!--                    <template slot-scope="scope">-->
      <!--                        <span v-if="scope.row.hot_spot === '爆满'" style="color:#FF6F6F">{{scope.row.hot_spot}}</span>-->
      <!--                        <span v-if="scope.row.hot_spot === '拥挤'" style="color:#F7B500">{{scope.row.hot_spot}}</span>-->
      <!--                    </template>-->
      <!--                </el-table-column>-->
      <!--            </el-table>-->
    </div>
    <!-- 左侧弹框 -->
    <div class="left_model" :class="moveFlag?'leftmodelgo':'leftmodelback'">
      <div class="left_model_title">
        <span>{{model_title}}</span>
        <el-button
          @click="moveFlag=!moveFlag"
          class="model_close"
          type="primary"
          icon="el-icon-back"
          circle
        ></el-button>
      </div>
      <div class="model_content" v-if="clickTitleNum==1">
        <div class="model_title">
           <div class="model_title_item" style="color:#81FF5D;">充电桩</div> 
           <div class="model_title_item" style="color:#FF6F6F;">所属充电站</div> 
           <div class="model_title_item" style="color:#F7B500;">类型</div> 
        </div>
        <ul class="model_list" v-if="NewEnergyList.length>0">
          <li class="model_list_item" v-for="(item,index) in NewEnergyList" :key="index">
            <span style="color:#81FF5D;">{{item.equipmentName}}</span>
            <span style="color:#FF6F6F;">{{item.stationName}}</span>
            <span style="color:#F7B500;" >{{item.equipmentType | formatEquipmentType }}</span>
          </li>
        </ul>
        <div v-else class="no_data">
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
     <div class="model_content" v-if="clickTitleNum==2">
        <div class="model_title">
           <div class="model_title_item" style="color:#81FF5D;">停车场名称</div> 
           <div class="model_title_item" style="color:#FF6F6F;">车位数</div> 
           <div class="model_title_item" style="color:#F7B500;">停车场地址</div> 
        </div>
        <ul class="model_list" v-if="allParkList.length>0">
          <li class="model_list_item" v-for="(item,index) in allParkList" :key="index">
            <span style="color:#81FF5D;">{{item.carParkName}}</span>
            <span style="color:#FF6F6F;">{{item.carParkNum}}</span>
            <span style="color:#F7B500;" >{{item.carParkAddress }}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sysHeader from "@/components/common/sysHeader.vue";
import sysChart from "@/components/common/sysChart.vue";
import config from "@/api/config.js";
import util from "@/utils/util.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import DigitRoll from "@huoyu/vue-digitroll";
import axios from "axios";
export default {
  name: "home",
  components: {
    sysHeader,
    sysChart,
    vueSeamlessScroll,
    DigitRoll,
  },
  computed: {
    classOption() {
      return util.classOption;
    },
  },
  filters:{
      formatEquipmentType(value){
          if(value==1){
              return "直流设备"
          }else if(value==2){
              return "交流设备"
          }
      }
  },
  data() {
    return {
      moveFlag: false, //运动动画
      clickTitleNum: 0, //
      model_title:'',
      NewEnergyList:[],//新能源配比数据
      allParkList:[],//总停车场数
      inParkList:[],//场内停车场数量
      outParkList:[],//场外停车场数量
      myChart: undefined,
      mapOptions: {},
      tongji: {
        ztccs: 0,
        lnccs: 0,
        lwccs: 0,
      },
      centerRightTopOptions: {
        title: {
          text: "历城区",
          left: 42,
          top: 27,
          textStyle: {
            fontSize: 20,
            fontWeight: "bold",
            color: "#32FFB4",
          },
        },
        grid: {
          left: "20",
          right: "20",
          bottom: "20",
          top: "60",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#32FFB4",
            fontSize: 14,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
          axisLine: { show: false },
          splitLine: { show: false },
          data: ["充电桩数量", "单车数", "路外车场数", "路内车场数"],
        },
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              color: "rgba(27,158,234,0.2)",
            },
            barWidth: "50%",
            barGap: "-100%",
            barCategoryGap: "40%",
            data: [
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
            ],
            animation: false,
          },
          {
            name: "",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            barWidth: "50%",
            type: "bar",
            data: [
              {
                value: 0,
                itemStyle: {
                  color: "#9CAEBA",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#F36C6C",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#5AD8A6",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#0091FF",
                },
              },
            ],
          },
        ],
      },
      leftCenterOptions1: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: ["10%", "5%"],
        },
        legend: {
          textStyle: {
            color: "#BFE8FF",
            fontSize: 14,
            fontWeight: "bold",
          },
          left: "center",
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10,
          orient: "vertical",
          data: ["新能源车辆数", "充电桩数量"],
        },
        color: ["#42E0FC", "#0091FF"],
        series: [
          {
            name: "新能源配比",
            type: "pie",
            startAngle: 180,
            center: ["50%", "40%"],
            radius: ["25%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{d}%",
              color: "#fff",
              width: "40",
              height: 30,
              distanceToLabelLine: 1,
              margin: 0,
              fontSize: 14,
              fontWeight: "bold",
            },
            labelLine: {
              length: 2,
              length2: 2,
            },
            data: [
              { value: 1000000, name: "新能源车辆数" },
              { value: 1000000, name: "充电桩数量" },
            ],
          },
        ],
      },
      leftCenterOptions2: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: ["10%", "5%"],
        },
        legend: {
          textStyle: {
            color: "#BFE8FF",
            fontSize: 14,
            fontWeight: "bold",
          },
          bottom: 20,
          itemWidth: 10,
          itemHeight: 10,
          orient: "vertical",
          data: ["非新能源车辆数", "新能源车辆数"],
        },
        color: ["#FF944D", "#B620E0"],
        series: [
          {
            name: "新能源配比",
            type: "pie",
            startAngle: 180,
            center: ["50%", "40%"],
            radius: ["25%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: "{d}%",
              color: "#fff",
              width: "40",
              height: 30,
              distanceToLabelLine: 1,
              margin: 0,
              fontSize: 14,
              fontWeight: "bold",
            },
            labelLine: {
              length: 2,
              length2: 2,
            },
            data: [
              { value: 0, name: "非新能源车辆数" },
              { value: 0, name: "新能源车辆数" },
            ],
          },
        ],
      },
      leftBottomOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          top: 20,
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "bold",
          },
          right: 10,
          data: ["单车注册量", "单车数量"],
        },
        color: ["#0091FF", "#8052FF"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#32FFB4",
            fontSize: 16,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#397BA0",
            },
          },
          data: ["青桔单车", "美团单车", "哈罗单车"],
        },
        series: [
          {
            name: "单车注册量",
            type: "bar",
            barWidth: "20%",
            itemStyle: {
                normal: {
                     barBorderRadius: [0,7,7,0],
                }
            },  
            data: [
              {
                value: 0,
                itemStyle: {
                  // color: '#44D7B6'
                },
              },
              {
                value: 0,
                itemStyle: {
                  // color: '#F7B500'
                },
              },
              {
                value: 0,
                itemStyle: {
                  // color: '#0091FF'
                },
              },
            ],
          },
          {
            name: "单车数量",
            type: "bar",
            barWidth: "20%",
            itemStyle: {
                normal: {
                     barBorderRadius: [0,7,7,0],
                }
            },  
            data: [
              {
                value: 0,
              },
              {
                value: 0,
              },
              {
                value: 0,
              },
            ],
          },
        ],
      },
      rightChartOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#FFFFFF",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
            fontWeight: "bold",
          },
          left: 10,
          data: ["车场总数", "可共享车场数", "占比"],
        },
        grid: {
          bottom: 100,
        },
        dataZoom: {
          textStyle: {
            color: "rgba(255,255,255,0.5)",
          },
          type: "slider",
          start: "35",
          end: "66",
        },
        xAxis: {
          type: "category",
          data: [],
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            lineStyle: {
              color: "#BFE8FF",
            },
          },
          axisLabel: {
            lineHeight: "40",
            color: "#BFE8FF",
            fontSize: 18,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "数量",
            show: false,
          },
          {
            type: "value",
            name: "占比",
            max: 100,
            min: 0,
            show: false,
          },
        ],
        series: [
          {
            name: "车场总数",
            type: "bar",
            itemStyle: {
              color: "#3473FE",
            },
            label: {
              show: true,
              position: "top",
              color: "#ffffff",
              fontSize: 14,
              fontWeight: "bold",
            },
            barWidth: "30%",
            data: [],
          },
          {
            name: "可共享车场数",
            type: "bar",
            barWidth: "30%",
            itemStyle: {
              color: "#5AD8A6",
            },

            label: {
              show: true,
              position: "top",
              color: "#ffffff",
              fontSize: 14,
              fontWeight: "bold",
            },
            data: [],
          },
          {
            name: "占比",
            type: "line",
            lineStyle: {
              color: "#B960FF",
            },
            itemStyle: {
              color: "#B960FF",
            },
            yAxisIndex: 1,
            data: [],
          },
        ],
      },
      tableData: [],
      myChartToolpie: undefined,
      tableData1: [],
      tableData2: [],
      leftInterval: undefined,
      rightInterval: undefined,
      chartPosition: 0,
      chartChangeFlag: false,
      centerInterval: undefined,
      chartChangeInterval: undefined,
      mapChartKey: "bike_num",
      selectName: "",
      huizongData: {},
    };
  },
  watch: {
    selectName(v) {
      this.centerRightTopOptions.series[1].data[3].value = 0;
      this.centerRightTopOptions.series[1].data[2].value = 0;
      this.centerRightTopOptions.series[1].data[1].value = 0;
      this.centerRightTopOptions.series[1].data[0].value = 0;
      this.centerRightTopOptions.series[0].data[0].value = 1000;
      this.centerRightTopOptions.series[0].data[1].value = 1000;
      this.centerRightTopOptions.series[0].data[2].value = 1000;
      this.centerRightTopOptions.series[0].data[3].value = 1000;
      this.centerRightTopOptions.title.text = v;
      const data = this.huizongData[v];
      if (!data) return;
      let max = 0;
      for (let key in data) {
        if (max < parseInt(data[key])) {
          max = parseInt(data[key]);
        }
      }
      max = Math.floor(max / 2) + max;
      this.centerRightTopOptions.series[0].data[0].value = max;
      this.centerRightTopOptions.series[0].data[1].value = max;
      this.centerRightTopOptions.series[0].data[2].value = max;
      this.centerRightTopOptions.series[0].data[3].value = max;

      this.centerRightTopOptions.series[1].data[3].value = data.inside_park_num;
      this.centerRightTopOptions.series[1].data[2].value =
        data.outside_park_num;
      this.centerRightTopOptions.series[1].data[1].value = data.bike_num;
      this.centerRightTopOptions.series[1].data[0].value =
        data.charging_pile_num;
      if (this.myChart) {
        //console.log(this.mapOptions);
        const d = this.mapOptions.series[0].data.map((item) => {
          return {
            name: item.name,
            value: item.value,
            id: item.id,
          };
        });
        d.forEach((item) => {
          if (item.name === v) {
            item.itemStyle = {
              areaColor: "rgba(0,165,255,0.8)",
              shadowColor: "rgba(255, 255, 255, 0.5)",
              shadowBlur: 2,
              borderColor: "rgba(0,165,255,1)", // 边框颜色
              borderWidth: 1, // 柱条的描边宽度，默认不描边。
              borderType: "solid", // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
              opacity: 1,
            };
          }
        });
        this.mapOptions.series[0].data = d;
        //console.log(this.mapOptions);
        this.myChart.setOption(this.mapOptions);
      }
    },
    chartPosition(v) {
      const start = v;
      const startMap = {
        0: 0,
        30: 35,
        70: 70,
      };
      const endMap = {
        0: 30,
        30: 66,
        70: 100,
      };
      this.rightChartOptions.dataZoom.start = startMap[start];
      this.rightChartOptions.dataZoom.end = endMap[start];
    },
  },
  created(){
    //新能源配比弹框数据
    this.getNewEnergyList();
    //获取总停车场数
    this.getAllParkList();
    //获取场内停车场数
    this.getInParkList();
    //场外停车场数量
    this.getOutParkList()
  },
  mounted() {
    this.drawMap();
    this.getLeftTop();
    this.getRightBottom();
    this.getCenterLeft();
    this.getLeftCenter();
    this.getRightChart();
    this.getLeftBottom();
    this.getMapData();
    this.getCenterBottom();
    this.getCenterRightTop();
  },
  methods: {
    //新能源配比数据
    getNewEnergyList(){
       axios({
        method: "post",
        url: config.basePath + "park/index/getEquipmentInfoList",
        data: {
          area:''
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res222",res)
          if (res.status >= 200 && res.status < 300) {
            this.NewEnergyList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //获取总停车昌数据
    getAllParkList(){
        axios({
        method: "post",
        url: config.basePath + "park/index/getParkListByType",
        data: {
            type:''
        },
        header: {
        "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res333",res)
          if (res.status >= 200 && res.status < 300) {
            this.allParkList = res.data.data;
          } else {
           // console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //获取场内停车场数
    getInParkList(){
        axios({
        method: "post",
        url: config.basePath + "park/index/getParkListByType",
        data: {
            type:1
        },
        header: {
        "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res333",res)
          if (res.status >= 200 && res.status < 300) {
            this.inParkList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //获取场外停车场数量
    getOutParkList(){
        axios({
        method: "post",
        url: config.basePath + "park/index/getParkListByType",
        data: {
            type:2
        },
        header: {
        "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res333",res)
          if (res.status >= 200 && res.status < 300) {
            this.outParkList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //点击栏目标题展示弹框及其对应数据
    clickTitle(num) {
        if (num == 1) {
          this.moveFlag = !this.moveFlag;
          this.clickTitleNum = 1;
          this.model_title = "新能源配比";
        } else if (num == 2) {
          if(this.moveFlag==true){
              this.moveFlag=true
          }else{
              this.moveFlag=!this.moveFlag
          }
          this.clickTitleNum = 2;
          this.model_title = "总停车场数";
          
        } else if (num == 3) {
            this.allParkList=this.inParkList;
          if(this.moveFlag==true){
              this.moveFlag=true
          }else{
              this.moveFlag=!this.moveFlag
          }
          this.clickTitleNum = 2;
          this.model_title = "路内车场数";
        } else if (num == 4) {
             this.allParkList=this.outParkList;
          if(this.moveFlag==true){
              this.moveFlag=true
          }else{
              this.moveFlag=!this.moveFlag
          }
          this.clickTitleNum = 2;
          this.model_title = "路外车场数";
        }
    },
    getCenterRightTop() {
      this.$api.get(
        config.basePath + "park/index/getTotalResourceData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            data.forEach((item) => {
              this.huizongData[item.region_name] = item;
            });
            this.selectName = "历城区";
            //console.log(data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterBottom() {
      this.$api.get(
        config.basePath + "park/index/getMiddleTotalData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tongji.ztccs = data.total_park_num || 0;
            this.tongji.lnccs = data.inside_park_num || 0;
            this.tongji.lwccs = data.outside_park_num || 0;
            //console.log(response.data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getMapData() {
      this.$api.get(
        config.basePath + "park/index/getRegionCarRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.mapChartMap = {};
            data.forEach((item) => {
              this.mapChartMap[item.area_name.substring(0, 2)] = item;
            });
            //console.log(response.data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftBottom() {
      this.$api.get(
        config.basePath + "park/index/getBikeData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            data.forEach((item) => {
              let ind = 0;
              if (item.bike_name === "哈罗单车") {
                ind = 2;
              }
              if (item.bike_name === "美团单车") {
                ind = 1;
              }
              if (item.bike_name === "青桔单车") {
                ind = 0;
              }
              this.leftBottomOptions.series[0].data[ind].value = item.bike_num;
              this.leftBottomOptions.series[1].data[ind].value = item.reg_num;
            });
            //console.log(response.data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftCenter() {
      this.$api.get(
        config.basePath + "park/index/getChargingPile",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            if (data.length > 0) {
              this.leftCenterOptions1.series[0].data[0].value =
                data[0].charging_car;
              this.leftCenterOptions1.series[0].data[1].value =
                data[0].charging_num;
            }
            if (data.length > 1) {
              this.leftCenterOptions2.series[0].data[0].value =
                data[1].car_total_num;
              this.leftCenterOptions2.series[0].data[1].value =
                data[1].charging_car;
            }
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightChart() {
      this.$api.get(
        config.basePath + "park/index/getCarRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            const xAxis = {
              type: "category",
              data: [],
              axisPointer: {
                type: "shadow",
              },
              axisLine: {
                lineStyle: {
                  color: "#1B9EEA",
                },
              },
              axisLabel: {
                lineHeight: "30",
                fontSize: 18,
                fontWeight: "bold",
              },
              axisTick: {
                show: false,
              },
            };
            const data1 = [];
            const data2 = [];
            const data3 = [];
            data.forEach((item) => {
              xAxis.data.push(item.area_name);
              data1.push(item.car_num);
              data2.push(item.shared_num);
              data3.push(item.rate);
            });
            this.rightChartOptions.xAxis = xAxis;
            this.rightChartOptions.series[0].data = data1;
            this.rightChartOptions.series[1].data = data2;
            this.rightChartOptions.series[2].data = data3;
            this.startChangeChart();
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    startChangeChart() {
      this.chartChangeFlag = true;
      if (this.chartChangeInterval) {
        clearInterval(this.chartChangeInterval);
      }
      this.chartChangeInterval = setInterval(() => {
        if (this.chartChangeFlag) {
          const map1 = {
            0: 30,
            30: 70,
            70: 0,
          };
          this.chartPosition = map1[this.chartPosition];
        }
      }, 8000);
    },
    changeTable(data) {
      data.push(data[0]); //把第一条数据插入数组最有一条
      data.shift(); //删除数组中第一条数据
    },
    playLeftTable() {
      if (this.leftInterval) {
        clearInterval(this.leftInterval);
      }
      this.leftInterval = setInterval(() => {
        this.changeTable(this.tableData);
      }, 8000); //每两秒执行一次插入删除操作
    },
    playCenterTable() {
      if (this.centerInterval) {
        clearInterval(this.centerInterval);
      }
      this.centerInterval = setInterval(() => {
        this.changeTable(this.tableData2);
      }, 8000); //每两秒执行一次插入删除操作
    },
    playRightTable() {
      if (this.rightInterval) {
        clearInterval(this.rightInterval);
      }
      this.rightInterval = setInterval(() => {
        this.changeTable(this.tableData1);
      }, 8000); //每两秒执行一次插入删除操作
    },
    getLeftTop() {
      this.$api.get(
        config.basePath + "park/index/getJamData1",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data || [];
            this.tableData = [].concat(...data).concat(...data);
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getRightBottom() {
      this.$api.get(
        config.basePath + "park/index/getAreaHotspot",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data || [];
            this.tableData1 = [].concat(...data).concat(...data);
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterLeft() {
      this.$api.get(
        config.basePath + "park/index/getJameStreet",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data || [];
            this.tableData2 = [].concat(...data).concat(...data);
            //console.log(response);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    stockPieManagement(odiv, yindex, xindex, chartData) {
      const myChartToolpie = this.$echarts.init(document.getElementById(odiv));
      const myChartTool = {
        title: {
          text: "单车类型占比",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: 10,
          top: 10,
        },
        animation: false,
        legend: {
          textStyle: {
            color: "#84D2FF",
          },
          bottom: 20,
          data: ["哈罗单车", "美团单车", "青桔单车"],
        },
        color: ["#0091FF", "#F7B500", "#44D7B6"],
        series: [
          {
            name: "单车类型占比",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: "{d}%",
                color: "#fff",
                width: "40",
                height: 30,
                distanceToLabelLine: 1,
                show: true,
              },
              emphasis: {
                show: true,
                formatter: "{d}%",
                color: "#fff",
                width: "40",
                height: 30,
                distanceToLabelLine: 1,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },

            data: [
              {
                value: 2,
                name: "哈罗单车",
              },
              {
                value: 2,
                name: "美团单车",
              },
              {
                value: 2,
                name: "青桔单车",
              },
            ],
          },
        ],
      };
      for (let key in chartData) {
        const item = chartData[key];
        if (item.bike_name === "哈罗单车") {
          myChartTool.series[0].data[0].value = item[this.mapChartKey];
        }
        if (item.bike_name === "美团单车") {
          myChartTool.series[0].data[1].value = item[this.mapChartKey];
        }
        if (item.bike_name === "青桔单车") {
          myChartTool.series[0].data[2].value = item[this.mapChartKey];
        }
      }
      myChartToolpie.setOption(myChartTool);
    },
    drawMap() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      const that = this;
      // 绘制图表
      //myChart.setOption()
      this.$api.get("/370100.json", {}, (response) => {
        if (response.status >= 200 && response.status < 300) {
          const jinanData = response.data;
          this.$echarts.registerMap("jinan", jinanData);
          this.mapOptions = {
            tooltip: {
              trigger: "item",
              position: ["65%", "10%"],
              showDelay: 110,
              transitionDuration: 0.2,
              backgroundColor: "rgba(0,0,0,0)",
              formatter: function (obj) {
                that.selectName = obj.name;
                return "";
                // const nameKey = obj.name
                // const chartData = that.mapChartMap[nameKey.substring(0,2)]
                // console.log(chartData,'----------------',obj.name)
                //
                // console.log(that.mapChartMap)
                // if(!chartData){
                //     return ''
                // }
                // const value = obj.data.id;
                // //这两步就是获取 x 和y 坐标
                // const yindex = obj.dataIndex;
                // const xindex = obj.seriesIndex;
                // //当调用这个方法后，不会立即获取到ebox这个ID，所以用定时器，或许有别的方法，欢迎补充
                // setTimeout(() => {
                //     //给饼图传入ID
                //     that.stockPieManagement("ebox_"+value,yindex,xindex,chartData);
                // },100)
                // //重点是这一步，返回一个DIV模型
                // return '<div style="position:absolute;left:0;right:0;top:0;bottom:0;"></div><div id="ebox_'+value+'" style="width:360px; height:300px;" class="ebox"></div>'
              },
            },
            geo: {
              map: "jinan",
              roam: false,
              showLegendSymbol: true,
              label: {
                show: true,
                color: "rgba(255,255,255,0.6)",
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                  },
                  areaColor: "rgba(7,48,105,0.8)",
                  //shadowColor: 'rgba(255, 255, 255, 0.5)',
                  //shadowBlur: 2,
                  borderColor: "rgba(0,165,255,1)", // 边框颜色
                  borderWidth: 1, // 柱条的描边宽度，默认不描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                  opacity: 1,
                },
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                },
                itemStyle: {
                  // areaColor: 'rgba(56,177,237,0.7)',
                  // borderColor: '#1BECE4', // 边框颜色
                  // borderWidth: 1, // 柱条的描边宽度，默认不描边。
                  // borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                  // opacity: 1
                  areaColor: "rgba(0,165,255,0.8)",
                  shadowColor: "rgba(255, 255, 255, 0.5)",
                  shadowBlur: 2,
                  borderColor: "rgba(0,165,255,1)", // 边框颜色
                  borderWidth: 1, // 柱条的描边宽度，默认不描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                  opacity: 1,
                },
              },
            },
            series: [
              {
                name: "济南",
                type: "map",
                roam: false,
                map: "jinan",
                label: {
                  show: true,
                  color: "#ffffff",
                },
                itemStyle: {
                  label: {
                    show: true,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                  normal: {
                    label: {
                      show: true,
                      color: "rgba(255,255,255,0.8)",
                    },
                    areaColor: "rgba(7,48,105,0.8)",
                    shadowColor: "rgba(255, 255, 255, 0.5)",
                    shadowBlur: 2,
                    borderColor: "rgba(0,165,255,1)", // 边框颜色
                    borderWidth: 1, // 柱条的描边宽度，默认不描边。
                    borderType: "solid", // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                    opacity: 1,
                  },
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                  itemStyle: {
                    // areaColor: 'rgba(56,177,237,0.7)',
                    // borderColor: '#1BECE4', // 边框颜色
                    // borderWidth: 1, // 柱条的描边宽度，默认不描边。
                    // borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                    // opacity: 1
                    areaColor: "rgba(0,165,255,0.8)",
                    shadowColor: "rgba(255, 255, 255, 0.5)",
                    shadowBlur: 2,
                    borderColor: "rgba(0,165,255,1)", // 边框颜色
                    borderWidth: 1, // 柱条的描边宽度，默认不描边。
                    borderType: "solid", // 柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                    opacity: 1,
                  },
                },
                // 文本位置修正
                /*
                                    textFixed: {
                                        Alaska: [20, -20]
                                    },*/
                data: [
                  { name: "历下区", value: 0, id: "1" },
                  { name: "历城区", value: 0, id: "2" },
                  { name: "市中区", value: 0, id: "3" },
                  { name: "槐荫区", value: 0, id: "4" },
                  { name: "天桥区", value: 0, id: "5" },
                  { name: "济阳区", value: 0, id: "6" },
                  { name: "长清区", value: 0, id: "7" },
                  { name: "章丘区", value: 0, id: "8" },
                  { name: "平阴县", value: 0, id: "9" },
                  { name: "商河县", value: 0, id: "10" },
                  { name: "钢城区", value: 0, id: "11" },
                  { name: "莱芜区", value: 0, id: "12" },
                ],
              },
            ],
          };
          this.myChart.setOption(this.mapOptions);
          this.myChart.on("geoselectchanged", function (params) {
            // 控制台打印数据的名称
            //console.log(params.name);
          });
        } else {
         // console.log(response.message);
        }
      });
    },
  },
};
</script>

<style scoped>

/* 左侧弹窗 */
.left_model {
  width: 460px;
  height: 800px;
  position: absolute;
  left: -560px;
  top: 10%;
  padding: 0 12px;
  background-image: url("~@/assets/images/model_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 2s;
  z-index: 120;
}
.left_model .model_content {
  width: 100%;
  /* height: 740px; */
}
.left_model_title {
  position: relative;
  width: 100%;
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  /* margin-bottom: 20px; */
}
.left_model .left_model_title >>> .el-button--primary {
  background-color: #04132c;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 122;
}
.model_title{
    width: 100%;
    height: 50px;
    border:1px solid #1c95dc;
    margin-top: 20px;
    display: flex;
}
.model_title_item{
    flex:1;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 50px;
}
.model_list{
    height: 660px;
    overflow-y: scroll;
}
.model_list::-webkit-scrollbar{
    display: none;
}
.model_list .model_list_item{
    display: flex;
    align-items: center;
    width: 100%;
    padding:10px 0;
    justify-content: space-around;
}
.model_list .model_list_item span{
    flex: 1;
    text-align: center;
}
.home_left_table {
  position: absolute;
  width: 456px;
  top: 122px;
  /* left: 22px; */
  height: 288px;
  overflow: hidden;
  background-image: url("~@/assets/images/home_left_top_bg.png");
  background-repeat: no-repeat;
  background-size: 456px 48px;
  background-position: center 0;
  transition: all 2s;
}
.home_page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url("~@/assets/images/home_bg.png");
  background-repeat: no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 0;
  overflow: hidden;
}
.home_center_chart {
  position: absolute;
  width: 789px;
  height: 930px;
  left: 50%;
  margin-left: -394px;
  bottom: 40px;
}
>>> .el-table,
.el-table__expanded-cell {
  background: none;
}
>>> .el-table tr:hover {
  background: none;
}
>>> .el-table td,
.el-table th.is-leaf {
  border: none;
}
>>> .el-table,
>>> .el-table * {
  border: none;
}
>>> .el-table .cell {
  line-height: 28px;
  font-size: 12px;
  color: #84d2ff;
}

>>> .el-table th > .cell {
  line-height: 32px;
}
>>> .el-table .el-table__body tr:nth-child(even) {
  background: rgba(50, 63, 98, 0.2);
}
.home_left_table_border {
  border: 1px solid #1b9eea;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 47px;
}
.home_right_table {
  width: 456px;
  position: absolute;
  right: 13px;
  bottom: 43px;
  padding-top: 35px;
  height: 462px;
  overflow: hidden;
  background-image: url("~@/assets/images/home_right_bottom_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 64px;
  background-position: 0 0;
}
.home_left_center {
  width: 456px;
  /* left: 22px; */
  top: 434px;
  position: absolute;
  transition: all 2s;
}
.home_left_bottom {
  width: 456px;
  /* left: 22px; */
  bottom: 43px;
  height: 340px;
  position: absolute;
  transition: all 2s;
}
.home_center_left {
  position: absolute;
  width: 346px;
  height: 272px;
  top: 177px;
  left: 502px;
  background-image: url("~@/assets/images/home_center_left_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}
.home_left_center_1 {
  position: absolute;
  left: -20px;
  width: 60%;
  top: 0;
  bottom: 0;
}
.home_left_center_2 {
  position: absolute;
  left: 40%;
  width: 60%;
  top: 0;
  bottom: 0;
}
.home_left_bottom_title {
  height: 38px;
  text-align: right;
  padding-right: 24px;
  background-image: url("~@/assets/images/home_left_bottom_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 38px;
  background-position: 0 0;
  margin: 0 auto;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 38px;
}
.home_left_bottom_chart {
  width: 454px;
  height: 302px;
  border: 1px solid #1b9eea;
  position: relative;
  overflow: hidden;
}
.home_left_center_title {
  width: 307px;
  height: 40px;
  text-align: center;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  background-image: url("~@/assets/images/home_left_center_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 40px;
  background-position: 0 0;
  margin: 0 auto;
  cursor: pointer;
}
.home_left_center_chart {
  width: 454px;
  height: 200px;
  border: 1px solid #1b9eea;
  position: relative;
  overflow: hidden;
}
.home_right_table_border {
  border: 1px solid #1b9eea;
  position: absolute;
  left: 1px;
  bottom: 0;
  right: 1px;
  top: 63px;
}
.home_right_chart {
  width: 458px;
  height: 397px;
  position: absolute;
  right: 13px;
  top: 121px;
  background-image: url("~@/assets/images/home_top_right_bg.png");
  background-repeat: no-repeat;
  background-size: 458px 396px;
  background-position: 0 0;
}
.home_right_table_title {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 24px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 24px;
}
.home_right_chart_title {
  position: absolute;
  left: 29px;
  top: 18px;
  height: 24px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 24px;
}
.home_right_chart_box {
  position: absolute;
  left: 20px;
  right: 25px;
  top: 60px;
  bottom: 15px;
  overflow: hidden;
}
.home_center_left_title {
  padding-top: 23px;
  padding-left: 16px;
  height: 18px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 18px;
  cursor: pointer;
}
.home_center_left_item {
  min-height: 20px;
  font-size: 14px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #bfe8ff;
  line-height: 20px;
  padding: 8px 0;
  word-break: break-all;
}
.home_center_left_box {
  position: absolute;
  top: 56px;
  left: 24px;
  bottom: 12px;
  overflow: hidden;
  right: 24px;
  padding: 8px 0;
}
.home_left_table .common_table_head {
  height: 48px;
  line-height: 48px;
}

.home_left_table .common_table_body .common_row {
  height: 48px;
  line-height: 48px;
}
.home_left_table .common_table_body {
  top: 48px;
}
.home_right_table .common_table_head {
  margin-top: -1px;
}
.home_right_table .common_table_body {
  top: 63px;
}
.home_right_table .common_table_body .common_row {
  height: 43px;
  line-height: 43px;
  font-size: 14px;
}
.home_center_bottom {
  position: absolute;
  left: 50%;
  width: 744px;
  bottom: 32px;
  margin-left: -372px;
}
.tongji_item {
  position: relative;
  width: 224px;
  height: 116px;
  cursor: pointer;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
}
.tongji_item_name {
  padding-top: 30px;
  height: 20px;
  font-size: 16px;
  /* font-family: SourceHanSansSC-Bold, SourceHanSansSC; */
  font-family: "electronicFont";
  font-weight: bold;
  color: #bfe8ff;
  line-height: 20px;
  text-align: center;
}
.tongji_item_num {
  font-size: 32px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: rgba(50, 255, 180, 1);
  line-height: 28px;
  width: 100px;
  margin: 0 auto;
  margin-top: 10px;
}
.d-roll-wrapper {
  margin: 0 auto;
}
.home_center_right_top {
  position: absolute;
  top: 178px;
  right: 493px;
  height: 270px;
  width: 268px;
  z-index: 100;
}
.home_center_right_top_title {
  width: 242px;
  height: 40px;
  text-align: center;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  background-image: url("~@/assets/images/home_center_top_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 40px;
  background-position: 0 0;
  margin: 0 auto;
}
.home_center_right_top_body {
  width: 268px;
  height: 230px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.bmView div{
    background-color: transparent!important;
}
</style>
<style>
.el-table tbody tr:hover > td {
  background: rgba(50, 63, 98, 0.3) !important;
}
.el-table td,
.el-table th {
  padding: 0;
}

.el-table th,
.el-table tr {
  background: none;
}
.el-table::before {
  height: 0;
}

.el-table * {
  border: none !important;
}
</style>
